<template>
  <div>
    <el-dialog
      :title="form.id ? '编辑规格' : '添加规格'"
      :visible.sync="isshow"
      @close="reset"
    >
      <el-form :model="form" :rules="rules" ref="specsForm">
        <el-form-item
          label="规格名称"
          :label-width="formLabelWidth"
          prop="specsname"
        >
          <el-input
            clearable
            v-model="form.specsname"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="规格属性"
          :label-width="formLabelWidth"
          prop="attrs"
          v-for="(item, index) in attr"
          :key="index"
        >
          <div
            class="specslist"
            :style="{ paddingRight: index == 0 ? '10%' : '18%' }"
          >
            <el-input
              clearable
              v-model="attr[index]"
              autocomplete="off"
            ></el-input>
            <el-button v-if="index == 0" type="primary" @click="addspecs"
              >新增规格属性</el-button
            >
            <el-button v-else @click="delspecs(index)">删除</el-button>
          </div>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-switch
            v-model="form.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="2"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="reset">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { specsaddedit, specsinfo } from "../../request/api";
import { mapState, mapActions } from "vuex";
export default {
  props: ["pageData"],
  data() {
    let validatePass = (rule, value, callback) => {
      if (!this.attr.every((item) => item)) {
        callback(new Error("请填写完整的规格属性"));
        return;
      }
      callback();
    };
    return {
      isshow: false,
      dialogTableVisible: false,
      formLabelWidth: "120px",
      attr: [""],
      form: {
        specsname: "",
        attrs: "",
        status: 2,
      },
      rules: {
        specsname: [
          { required: true, message: "请输入规格名称", trigger: "blur" },
        ],
        attrs: [{ validator: validatePass, trigger: "blur" }],
      },
    };
  },
  computed: {
    ...mapState("specs", ["specsList", "specsCount"]),
  },
  mounted() {},
  methods: {
    ...mapActions("specs", ["getSpecsList", "getSpecsCount"]),
    reset() {
      this.isshow = false;
      this.$refs.specsForm.resetFields();
      this.attr = [""];
      this.form = {
        specsname: "",
        attrs: "",
        status: 2,
      };
    },
    submitForm() {
      this.$refs.specsForm.validate((val) => {
        if (!val) {
          return;
        }
        let url = this.form.id ? "/specsedit" : "/specsadd";
        this.form.attrs = this.attr.join();
        specsaddedit(url, this.form).then((res) => {
          if (res.code == 200) {
            this.$message.success(res.msg);
            // if (this.form.id) this.getSpecsList();
            this.getSpecsCount(this.form.id ? false : true);
            this.reset();
            return;
          }
          this.$message.error(res.msg);
        });
      });
    },
    getInfo(id) {
      this.isshow = true;
      specsinfo({ id }).then((res) => {
        if (res.code == 200) {
          this.form = res.list[0];
          this.attr = res.list[0].attrs;
        }
      });
    },
    addspecs() {
      this.attr.push("");
    },
    delspecs(index) {
      this.attr.splice(index, 1);
    },
  },
};
</script>

<style scoped>
.specslist {
  display: flex;
  padding-right: 100px;
  margin-bottom: 10px;
}
.specslist:last-child {
  margin-bottom: 0;
}
.specslist .el-button {
  margin-left: 5px;
}
</style>